<!doctype html>
<html class="no-js" lang="">
 
<head>
   <title>ESP32 Material Lite</title>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">

   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
	<link rel="stylesheet" href="vendor/google-fonts.css">
	<link rel="stylesheet" href="vendor/material.css">
	<!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.indigo-pink.min.css">-->
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
               <input class="mdl-textfield__input" type="text" id="sample3">
               <label class="mdl-textfield__label" for="sample3">Text...</label>
            </div>
         </form>
      </div>
   </div>
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--1-col">
         <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
            <i class="material-icons">add</i>
         </button>
      </div>
      <div class="mdl-cell mdl-cell--1-col">
         <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Button</button>
      </div>
   </div>
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
         <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0">
      </div>
   </div>
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
            <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
            <span class="mdl-checkbox__label">Checkbox</span>
         </label>
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
            <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Checkbox2</span>
         </label>
         <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3">
            <input type="checkbox" id="checkbox-3" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">Checkbox3</span>
         </label>
      </div>
   </div>
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
         <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
            <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
            <span class="mdl-radio__label">First</span>
         </label>
         <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
            <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
            <span class="mdl-radio__label">Second</span>
         </label>
         <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
            <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3">
            <span class="mdl-radio__label">Third</span>
         </label>
      </div>
   </div>
 
   <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4-col">
         <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
            <span class="mdl-switch__label">Switch</span>
         </label>
      </div>
   </div>
 
	<script src="vendor/material.js"></script>
	<!--<script src="https://cdn.jsdelivr.net/combine/npm/vue@2.6.10,npm/material-design-lite@1.3.0"></script>-->
</body>
 
</html>